<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>谦家生活 · 后台登录</title>
    <!-- 常规css -->
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <!-- 项目css -->
    <link th:href="@{css/layout.css}" rel="stylesheet" />
</head>

<body class="login-bg">

<div class="container login-container">

    <div class="panel panel-default" style="margin-top: 80px; width: 350px" >
        <div class="panel-heading">
            <h2 class="text-center" style="color:#4682B4; ">谦家生活后台管理</h2>
        </div>
        <div class="panel-body" style="padding: 30px">
            <form action="checkLogin" method="POST">
                <div class="login-pad">
                    <h3 class="text-center sign-title" style="margin-bottom: 30px;">登    录</h3>

                    <div class="login-text"><input type="text" id="adminName" name="adminName"  class="form-control" placeholder="用户名" autofocus></div>
                    <div class="login-text"><input type="password"  id='input_pwd' class="form-control" placeholder="密码"></div>
                    <input type='hidden' name='pwdMd5' id='md5_pwd' value=''/>

                    <button class="btn btn-lg btn-login btn-block btn-info login-text" type="submit" onclick="checkForm(event)">
                        <i class="fa fa-check"></i>
                    </button>
                </div>

                <label class="checkbox">
                <span class="pull-left" style="margin-left:20px">
                    <input type="checkbox" value="remember-me"> 记住我
                </span>
                        <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> 忘记密码?</a>
                </span>
                </label>

                <!-- Modal -->
                <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">忘记密码?</h4>
                            </div>
                            <div class="modal-body">
                                <p>请联系开发人员</p>
                            </div>
                            <div class="modal-footer">
                                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                                <button data-dismiss="modal" class="btn btn-primary" type="button">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- modal -->

            </form>
        </div>

    </div>




</div>

<!-- 常规js -->
<script th:src="@{js/jquery-3.4.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<!-- 项目js -->
<script th:src="@{js/md5.js}"></script>

<!-- 提示登录检验结果 -->
<script th:inline="javascript">
    var errMsg= [[${errMsg}]];
    if(errMsg!=null){
        alert(errMsg);
    }
</script>

<!-- 判断输入是否正确, MD5加密 -->
<script >
    function checkForm(event){
        var adminName = document.getElementById('adminName');
        var input_pwd = document.getElementById('input_pwd');
        var md5_pwd = document.getElementById('md5_pwd');
        if(adminName.value==""||adminName.value=="null"||adminName.value==undefined){
            event.preventDefault();
            alert("请输入用户名!");
        }else if(input_pwd.value==""||input_pwd.value=="null"||input_pwd.value==undefined){
            event.preventDefault();
            alert("请输入密码!");
        }else{
            md5_pwd.value =  hex_md5(input_pwd.value);
        }

    }
</script>

</body>
</html>